<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="员工名字:">
          <el-input v-model="formInline.user" placeholder="员工名称"></el-input>
        </el-form-item>
        <el-form-item label="培训班级:">
          <el-select v-model="formInline.region" placeholder="培训班级">
            <el-option label="A101" value=""></el-option>
            <el-option label="Bacs" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工添加时间范围:">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder=""
            end-placeholder="">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="员工编号"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="员工名称"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-user-solid"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="培训系统账号"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="参加培训"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="250px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              type="success"
              @click="checkDialogTableVisible = true">查看</el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="deleteThisPlan">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <template>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </template>
      </div>
    </el-main>
    <!--弹框-->
    <el-dialog title="查看员工信息" :visible.sync="checkDialogTableVisible">
      <el-card >
        <div>
          <el-descriptions class="margin-top"  :column="3" size="" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                员工工号
              </template>
              A1QQQ
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                员工姓名
              </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                员工电话
              </template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                电子邮箱
              </template>
              10086@qq.com
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                岗位方向
              </template>
              培训计划计划计划
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                参加培训计划
              </template>
              培训计划1，培训计划2，
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-divider content-position="left">XXX计划明细</el-divider>
      <el-table :data="gridData">
        <el-table-column property="date" label="课程编号" width="175px"></el-table-column>
        <el-table-column property="name" label="课程名称" width="175px"></el-table-column>
        <el-table-column property="name" label="课程完成时间" width="175px"></el-table-column>
        <el-table-column property="name" label="考试分数" width="175px"></el-table-column>
        <el-table-column property="name" label="是否通过" width="175px"></el-table-column>
        <el-table-column property="name" label="课程评分" ></el-table-column>
      </el-table>
      <span>XXXX培训计划评分(根据系统算法得出,100分值):78</span>
      <el-divider content-position="left">XXX计划明细</el-divider>
      <el-table :data="gridData">
        <el-table-column property="date" label="课程编号" width="175px"></el-table-column>
        <el-table-column property="name" label="课程名称" width="175px"></el-table-column>
        <el-table-column property="name" label="课程完成时间" width="175px"></el-table-column>
        <el-table-column property="name" label="考试分数" width="175px"></el-table-column>
        <el-table-column property="name" label="是否通过" width="175px"></el-table-column>
        <el-table-column property="name" label="课程评分" ></el-table-column>
      </el-table>
      <span>XXXX培训计划评分(根据系统算法得出,100分值):78</span>
    </el-dialog>
  </el-container>
</template>

<script>
    export default {
        name: "EmpTrainManage",
      data() {

        return {

          //弹窗状态
          checkDialogTableVisible: false,
          updateDialogTableVisible:false,
          addCourseDialogTableVisible:false,
          //头部表单数据
          formInline: {
            user: '',
            region: ''
          },
          //表格数据
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }],
          //信息弹窗数据
          gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
        }
      },
      methods: {

        //计划下架提示
        deleteThisPlan() {
          this.$confirm('此操作将永久删除XXX员工信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        //课程下架提示
        onSubmit() {
          console.log('submit!');
        },
        handleClick(row) {
          console.log(row);
        }
      }
    }
</script>

<style scoped>

</style>
